<template id="one-table">
    <div :class="" v-loading="loading" element-loading-text="拼命加载中">
        <!-- 表格功能列 -->
        <header-menu flex="main:justify" ref="headerMenu" v-if="option.header" style="margin-bottom: 10px">
            <template slot="menuLeft">
                <slot name="menuLeft"></slot>
            </template>
            <template slot="menuRight">
                <slot name="menuRight"></slot>
                <el-button
                    v-if="option.header.refresh"
                    icon="el-icon-refresh-right"
                    circle
                    :size="option.size || 'mini'"
                    @click="handleRefresh"
                ></el-button>
            </template>
        </header-menu>

        <slot name="header"></slot>

        <el-table
            :class="option.hasOwnProperty('operates') && option.operates.fixed ? 'table-fixed': ''"
            :data.sync="data"
            :height="option.height || tableHeight"
            :max-height="option.height || tableHeight"
            ref="one-table"
            :option.sync="option"
            border
            stripe
            :header-cell-style="headClass"
            @selection-change="handleSelectionChange"
        >
            <!-- 多选 -->
            <el-table-column v-if="option.selection" type="selection" align="center"></el-table-column>
            <!-- 序号 -->
            <el-table-column v-if="option.index" type="index" label="序号" align="center" width="50"></el-table-column>

            <!--end-->
            <!-- 自定义 -->
            <template v-for="(item, index) in option.column" v-if="!item.hide">
                <el-table-column
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                    :header-align="item.headerAlign || 'center'"
                    :align="item.align || 'center'"
                >
                    <template slot-scope="scope">
                        <!-- 插槽自定义列  -->
                        <slot v-if="item.slot" :name="item.prop" :row="scope.row" :index="scope.$index"></slot>
                        <!-- 常规列  -->
                        <span v-else>{{scope.row[item.prop]}}</span>
                    </template>
                </el-table-column>
            </template>
            <!--按钮操作组-->
            <el-table-column
                v-if="option.operates"
                ref="fixedColumn"
                label="操作"
                align="center"
                :width="option.operates.width"
                :fixed="option.operates.fixed"
            >
                <template slot-scope="scope">
                    <!-- 插槽自定义列  -->
                    <slot name="operates" :row="scope.row" :index="scope.$index"></slot>
                </template>
            </el-table-column>
            <template slot="empty">
                <slot name="empty"></slot>
            </template>
        </el-table>
        <!-- 分页 -->
        <div flex="dir:right" style="margin: 10px 0">
            <el-pagination
                ref="tablePage"
                background
                v-if="option.page"
                :size="option.size || 'mini'"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page="option.page.currentPage || 1"
                :page-sizes="option.page.pageSizes || [15, 50, 100, 300, 500]"
                :page-size="option.page.pageSize  || 15"
                :total="option.page.total  || 0"
                :layout="option.page.layout  || 'total, sizes, prev, pager, next'"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
    'use strict';Vue.component('one-table',{template:'#one-table',props:{loading:{type:Boolean,default:function(){return!1},},data:{type:Array,default:function(){return[]},},option:{type:Array,default:function(){return[]},},},data(){return{tableHeight:600,}},beforeMount(){let d=document,a=d.compatMode=='BackCompat'?d.body:d.documentElement;if(this.$refs.headerMenu){this.tableHeight=a.clientHeight-this.$refs.headerMenu.offsetHeight-80}else{this.tableHeight=a.clientHeight-200}},watch:{},methods:{headClass:function(){return'background:#fff;'},handleCurrentChange:function(e){this.$emit('current-change',e)},handleSizeChange:function(e){this.$emit('size-change',e)},handleRefresh:function(){this.$emit('handleRefresh',val)},handleSelectionChange:function(val){this.$emit('selection-change',val)},},});
</script>
